<template>
	<view :class="{
      actionBtn: true,
      actionBtn0: position == 0,
      actionBtn1: position == 1,
      actionBtn2: position == 2,
      actionBtn3: position == 3,
    }" v-if="judgeGopayOrQianyue()" @click.stop="clickHandler">
		取消订单
		<wyb-popup ref="productDetails" type="bottom" height="680" radius="6" title="取消原因" :titleStyle="titleStyle"
			:showCloseIcon="true">
			<view class="content-wrapper">
				<view class="content-container">
					<view class="why">请选择取消订单的原因：</view>
					<view class="reason-item" v-for="(reasonObj, idx) in reasonList" :key="idx"
						@click.stop="choseReasonHandler(reasonObj)">
						<image src="/static/orderList/inactive.png" :class="{
                checkIcon: true,
                hide: activeReasonStr == reasonObj.content,
              }" />
						<image src="/static/orderList/active.png" :class="{
                checkIcon: true,
                hide: activeReasonStr != reasonObj.content,
              }" />
						<text class="reasonContent">{{ reasonObj.content }}</text>
					</view>
					<view @click.stop="submitReasonHandler" :class="{ btn: true, disabledBtn: !activeReasonStr }">提交
					</view>
				</view>
			</view>
		</wyb-popup>
		<PartyCover @partCoverCall="partCoverCall" ref="partCover" />
	</view>
</template>

<script>
	// 取消订单按钮
	import {
		checkPosition,
		getOrderId,
		checkOrderNeedFahuo,
		notifyTopPageRefresh,
	} from "../utils/checkShowBtn.js";
	import wybPopup from "@/components/wyb-popup/wyb-popup.vue";
	import PartyCover from "../../../partyCover"
	import {
		APP_APPID
	} from "../../../../utils/constant.js"
	const DEFAULT_REASON = ""; // 默认选中的取消原因

	const CANCEL_REASONS = [{
			id: 1,
			content: "商品价格较贵",
		},
		{
			id: 2,
			content: "等待时间较长",
		},
		{
			id: 3,
			content: "重新下单",
		},
		{
			id: 4,
			content: "想体验一下流程",
		},
		{
			id: 5,
			content: "不想要了",
		},
	];

	export default {
		name: "quxiaodindan",

		props: {
			order: {
				type: Object,
				default: {},
			}, // 订单对象
			isUsedInList: {
				type: Boolean,
				default: true,
			}, // 是否使用在订单列表页面
		},

		data() {
			return {
				reasonList: CANCEL_REASONS, // 取消原因列表
				activeReasonStr: DEFAULT_REASON, // 处于焦点状态的取消原因
				titleStyle: {
					"font-size": "0.32rem",
					"font-family": "PingFangSC-Medium, PingFang SC",
					"font-weight": "500",
					color: "#333",
				},




				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,
			};
		},

		components: {
			wybPopup,
			PartyCover,
		},

		computed: {
			position: function() {
				return checkPosition.quxiaodindan(this.order, this.isUsedInList);
			},
		},

		methods: {
			//判断按钮是否出现
			judgeGopayOrQianyue() {
				if (this.order.status == '01') {
					return true
				} else {
					return false
				}
			},
			/**
			 * 选中取消原因的时候触发
			 */
			choseReasonHandler(reasonObj) {
				// uni.showModal({
				//   title: "温馨提示",
				//   content: "取消订单请联系后台客服人员",
				//   showCancel: false,
				// })
				const {
					content
				} = reasonObj;
				this.activeReasonStr = content;
			},

			/**
			 * 点击订单的时候触发
			 */
			clickHandler() {
				// uni.showModal({
				//   title: "温馨提示",
				//   content: "取消订单请联系后台客服人员",
				//   showCancel: false,
				// })
				// 拿订单创建时间和现在做比较，如果超过1个小时的话，那么弹窗提示请联系客服
				// const { createTime } = this.order
				// const check = 3 * 60 * 60 * 1000 // 1小时
				try {
					// const createStamp = new Date(createTime).valueOf()
					// const now = Date.now()
					// if (now - createStamp > check) { // 已超过1小时
					//   uni.showModal({
					//     title: "提示",
					//     content: "已超时，请联系客服取消",
					//     showCancel: false,
					//   })
					// } else { // 未超过小时，显示取消原因
					this.$refs.productDetails.show();
					// }
				} catch (_) {
					this.$refs.productDetails.show();
				}
			},

			/**
			 * 提交拒绝原因
			 */
			submitReasonHandler() {
				if (!this.activeReasonStr) {
					uni.showToast({
						title: "请选择取消原因"
					});
					return;
				}
				uni.showLoading({
					title: '加载中'
				});
				//  payedCloseOrder 已支付和未支付阶段的取消账单接口是不一样的，目前只有账单是待付款和待发货这两个状态才需要显示按钮
				const url = checkOrderNeedFahuo(this.order) ?
					"order/mall/api/order/userCancelOrder" :
					"order/mall/api/order/userCancelOrder";

				const postObj = {
					cancelReason: this.activeReasonStr,
					orderId: getOrderId(this.order),
				};
				const cnMap = {
					cancelReason: "取消原因",
					orderId: "订单ID"
				};
				const {
					postData,
					pass
				} = this.$postDataGuard(postObj, cnMap);
				if (!pass) return; // 数据校验失败

				this.$request(url, postData, "post").then(() => {
					uni.showToast({
						title: "操作成功"
					});

					uni.hideLoading();
					this.$refs.productDetails.close();
					notifyTopPageRefresh.apply(this);
					this.closeHandler();
				});
			},
			partCoverCall() {
				notifyTopPageRefresh.apply(this);
				this.closeHandler();
			},
			/**
			 * 关闭弹窗
			 */
			closeHandler() {
				this.activeReasonStr = DEFAULT_REASON;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.actionBtn {
		width: 138rpx;
		height: 56rpx;
		border-radius: 30rpx;
		border: 1px solid #c0c0c0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-left: 24rpx;
		flex-shrink: 0;
		float: right;
		// position: absolute;
	}

	.actionBtn {
		position: relative;
	}

	.content-wrapper {
		width: 750rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;

		.content-container {
			padding: 0 30rpx;

			.why {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				height: 1.5em;
				margin-top: 30rpx;
			}

			.reason-item {
				display: flex;
				align-items: center;
				height: 80rpx;
				border-top: 30rpx solid transparent;

				.checkIcon {
					width: 42rpx;
					height: 42rpx;
					margin-right: 20rpx;
				}

				.hide {
					display: none;
				}

				.reasonContent {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.btn {
				margin-top: 50rpx;
				width: 100%;
				height: 80rpx;
				@include global-background-color();
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #fff;
			}

			// .disabledBtn {
			//   opacity: 0.5;
			// }
		}
	}
</style>